<script setup>
import { ref, watch } from 'vue'
import { ElTable, ElTableColumn, ElPagination, ElInput, ElButton } from 'element-plus'
import { getExpressCompanyList } from '@/api/goodsOderFrom'

const emit = defineEmits(['select'])

const searchCode = ref('')
const searchName = ref('')
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(20)

const fetchData = async () => {
  loading.value = true
  try {
    const params = {
      queryFields: {
        expressCompanycode: searchCode.value,
        expressCompanyname: searchName.value,
      },
      currentPage: currentPage.value,
      pageSize: pageSize.value,
    }
    const res = await getExpressCompanyList(params)
    if (res.success) {
      tableData.value = res.data.list || []
      total.value = res.data.total || 0
    }
  } finally {
    loading.value = false
  }
}

watch([currentPage, pageSize], fetchData, { immediate: true })

const handleSearch = () => {
  currentPage.value = 1
  fetchData()
}

const handleSelect = (row) => {
  emit('select', row)
}
</script>
<template>
  <div class="express-company-selector">
    <div class="search-bar">
      <el-input
        v-model="searchCode"
        placeholder="快递公司编码"
        style="width: 160px"
        @keyup.enter="handleSearch"
      />
      <el-input
        v-model="searchName"
        placeholder="快递公司名称"
        style="width: 200px"
        @keyup.enter="handleSearch"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
    </div>
    <div class="table-wrapper">
      <el-table
        :data="tableData"
        v-loading="loading"
        @row-dblclick="handleSelect"
        style="width: 100%; height: 100%"
        max-height="100%"
      >
        <el-table-column prop="expressCompanycode" label="快递公司编码" min-width="120" />
        <el-table-column prop="expressCompanyname" label="快递公司名称" min-width="180" />
        <el-table-column label="操作" width="100">
          <template #default="{ row }">
            <el-button size="small" @click="handleSelect(row)">选择</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-bar">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :total="total"
          layout="total, prev, pager, next, sizes"
          :page-sizes="[20, 50, 100, 200]"
          style="text-align: right"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.express-company-selector {
  display: flex;
  flex-direction: column;
  height: 80vh;
  min-width: 400px;
}
.express-company-selector .search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.express-company-selector .table-wrapper {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.express-company-selector .el-table {
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
}
.express-company-selector .pagination-bar {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  margin-top: 12px;
}
</style>
